<template>
  <div class="form-control w-full max-w-xs">
    <label class="label">
      <span class="label-text">upload</span>
      <span class="label-text-alt">5mb^</span>
    </label>
    <input id="file" type="file"
           @change="fileChange()"
           accept="audio/*"
           :class="[ status ? 'file-input-success ' : 'file-input-error' ,'file-input file-input-primary file-input-bordered w-full max-w-xs']" />
    <label class="label">
      <span class="label-text-alt">{{ hook_getUser().username }}</span>
      <span class="label-text-alt">{{ hook_getUser().id }}</span>
    </label>
  </div>
  <div class="form-control mt-6">
    <button @click="next_setup()" :class="[ status ? 'btn-success' : 'btn-error' , 'btn btn-primary']">下一步</button>
  </div>
</template>

<script setup lang="ts">
import {hook_getUser} from "../../hook/UserHook.ts";
import router from "../../plugins/router.ts";
import {useSongStore} from "../../plugins/pinia.ts";
import $ from "jquery";
import {onMounted, ref} from "vue";

let status = ref(false)
function fileChange() {
  let file = $('#file').prop("files")[0];
  status.value = file != null;
}
function next_setup() {
  if (status.value != false) {
    useSongStore().song.url = $('#file').prop("files")[0];
    console.log(useSongStore().song.url)
    router.push("/add/add-two")
  } else {
    console.error("文件不存在")
  }
}



</script>

<style scoped>

</style>